<!DOCTYPE html>
<html>
 
 
 <head>
 <script>
 function  getJson(){
	 var xmlhttp;
	 if (window.XMLHttpRequest)
	   {// code for IE7+, Firefox, Chrome, Opera, Safari
	   xmlhttp=new XMLHttpRequest();
	   }
	 else
	   {// code for IE6, IE5
	   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	   }
	 xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
		  var songs = eval(xmlhttp.responseText);
		  var player = new MusicPlayer(songs);
		  player.getAutoNextSong();
		  player.play();
		  

		  
		  addEventListen = function(){
			  
		 	 play_pause_button =  document.getElementById("play_pause_button");					 
		 	 play_pause_button.onclick = function(){
		 		 if (player.isPlaying()){
		 			 player.pause();
		 		 }
		 		 else
		 			 player.play();
		 	 }
		 	 
		 	 next_button =  document.getElementById("next_button");
		 	 next_button.onclick = function(){
			 	player.getManualNextSong();
			 	if (player.isPlaying()){
			 		player.play();
		 		 }
		 	 }
		 	 
		 	prev_button =  document.getElementById("prev_button");
		 	prev_button.onclick = function(){ 
			 	player.getManualPrevSong();
			 	if (player.isPlaying()){
			 		player.play();
		 		 }
		 	 }
		 	timer = setInterval(function(){
		 		if(player.isEnded() || player.getError()!=0){
		 			player.getAutoNextSong();
		 			player.play();
		 		}
		 		
		 	},1000);
		 	 
		  }
		  addEventListen();
	    }
	  }
	 xmlhttp.open("GET","voa_spider.php",true);
	 xmlhttp.send();
	 
	 
	 
 }
 
 </script>
<meta charset="UTF-8">
<style type="text/css">
.play_panel_element { display:inline;
margin:0;


}
</style>

 </head>
 
 
<body  onload="getJson()">
<div id="songs">
<div id ="tableHeader">
<div> 歌曲</div>
<div>歌手</div>
<div>专辑test</div>
</div>
<div>

<div><div></div><div>美国之音</div></div>
<div style="display:inline"><a target="_blank" href="">VOA</a></div>


<div><a target="_blank" href="">special english</a></div>

</div>


</div>
 <div id ="playerpanel-bottomctrl">
				<ul class="play-btn">
				<li  id="prev_li" class ="play_panel_element" >
						<a id="prev_button" href="javascript:void(0);" onclick="return false;" hidefocus="true" title="上一首[《-]">上一首</a>
					</li>
					<li  class ="play_panel_element" >
						<a id="play_pause_button"   href="javascript:void(0);" onclick="return false;" hidefocus="true" title="播放[空格键]" >暂停</a>
					</li>
					<li class ="play_panel_element">
						<a id="next_button" href="javascript:void(0);" onclick="return false;" hidefocus="true" title="切歌[→]">下一首</a>
					</li>
				</ul>
			
</div>
  
</html>

<script type="text/javascript" src="player.js"></script>
 
 

